<template>
  <list-page>
    <pub-search
      v-model:searchColumns="searchColumns"
      v-model:search-form="searchForm"
      mask-append-to="table-content"
      @search="search"
    >
      <template #leftBtn>
        <el-button
          v-hasPermissions="['basic:system:roles:add']"
          type="primary"
          @click="add"
          :icon="Plus"
        >
          新增
        </el-button>
      </template>
    </pub-search>
    <pub-table
      ref="pubTable"
      :column="columns"
      :data="tableData"
      :loading="tableLoading"
    >
      <template v-slot:switch="scope">
        <el-switch
          :before-change="beforeChangeColumn"
          v-model="scope.row.status"
          active-color="#13ce66"
          inactive-color="#ff4949"
          :active-value="1"
          :inactive-value="0"
          @change="changeStatus(scope.row)"
        />
      </template>
      <template v-slot:option="scope">
        <el-button v-if="scope.row.isSystem != 1" v-hasPermissions="['basic:system:roles:edit']" plain type="primary" @click="edit(scope.row)">
          编辑
        </el-button>
        <!-- <el-button v-if="scope.row.isSystem != 1" v-hasPermissions="['basic:system:roles:delete']" plain type="primary" @click="del(scope.row)">删除</el-button> -->
        <el-button v-hasPermissions="['basic:system:roles:menu']" plain type="primary" @click="menu(scope.row)">
          菜单分配
        </el-button>
      </template>
    </pub-table>
    <!-- 添加/编辑弹窗 -->
    <pub-dialog
      v-if="dialogFormVisible_add"
      :title="popTitle"
      :hasExtraBtn="true"
      v-model:visible="dialogFormVisible_add"
      width="800px"
    >
      <!-- ref="dialogEdit" -->
      <dialogEdit
        @close="close"
        @submitForm="submitForm"
        :editData="editData"
        :isEdit="isEdit"
      ></dialogEdit>
    </pub-dialog>
    <!-- 菜单分配弹窗 -->
    <pub-dialog
      v-if="dialogFormVisible_menu"
      :title="popTitle"
      :hasExtraBtn="true"
      v-model:visible="dialogFormVisible_menu"
      width="1000px"
    >
      <menu-tree-pop
        ref="menuTreePopRef"
        :platform="platform"
        @close="dialogFormVisible_menu = false"
        @submitForm="menuSaveSubmit"
        :RoleId="RoleId"
      ></menu-tree-pop>
    </pub-dialog>
    <pub-pagination
      :total="pagination.total"
      v-model:page="pagination.page"
      v-model:limit="pagination.pageSize"
      @pagination="pagination.change"
    ></pub-pagination>
  </list-page>
</template>
<script>
export default {
  name: 'roles'
}
</script>
<script setup>
import dialogEdit from './components/add.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import {
  add_roles,
  edit_roles,
  delete_roles,
  get_roles_list,
  bind_menus_roles,
  enable_roles
} from '@/api/system'
import { useTable } from '@/hooks/UseTable'
import MenuTreePop from './components/menuTreePop.vue'
const menuTreePopRef = ref()
const RoleId = ref('')
const editData = ref({})
const popTitle = ref('')
const isEdit = ref(false)
const switchState = ref(false)
const editId = ref('')
const dialogFormVisible_menu = ref(false)
const dialogFormVisible_add = ref(false)
const total = ref(0)
const platform = ref()
let { tableData, search, getList, pagination, searchForm, tableLoading } =
  useTable(get_roles_list)
const columns = ref([
  { label: '角色名称', prop: 'name' },
  { label: '角色编号', prop: 'code' },
  { label: '是否禁用', type: 'switch', prop: 'status' },
  {
    label: '更新时间',
    prop: 'modifyDate'
  },
  { label: '操作', type: 'option', width: '220' }
])
const searchColumns = ref([
  {
    label: '角色名称',
    el: 'Input',
    bind: 'name',
    defaultValue: '',
    labelWidth: 80
  },
  {
    label: '角色编号',
    el: 'Input',
    bind: 'code',
    defaultValue: '',
    labelWidth: 80
  },
  
])

onMounted(() => {
  getList()
})

const beforeChangeColumn = () => {
  switchState.value = true
  return switchState.value
}

const menuSaveSubmit = val => {
  console.log('val', val)
  bind_menus_roles(val)
    .then(result => {
      if (result.succeed) {
        search()
        close()
        menuTreePopRef.value.loadClose()
        ElMessage({
          type: 'success',
          message: result.msg
        })
      } else {
        menuTreePopRef.value.loadClose()
      }
    })
    .catch(err => {
      menuTreePopRef.value.loadClose()
    })
}

const menu = row => {
  RoleId.value = row.id
  platform.value = row.platform
  popTitle.value = '正在给“'+row.name + '”分配菜单'
  dialogFormVisible_menu.value = true
}

const changeStatus = row => {
  if (switchState.value) {
    const params = {
      id: row.id,
      status: row.status
    }
    enable_roles(params).then(result => {
      if (result.succeed) {
        getList()
        ElMessage({
          type: 'success',
          message: result.msg
        })
      }
    })
  }
}

const add = row => {
  popTitle.value = '新增角色'
  dialogFormVisible_add.value = true
  isEdit.value = false
}

const edit = row => {
  console.log(row)
  popTitle.value = '编辑角色'
  editData.value = JSON.parse(JSON.stringify(row))
  dialogFormVisible_add.value = true
  isEdit.value = true
}

const close = () => {
  editId.value = ''
  dialogFormVisible_add.value = false
  dialogFormVisible_menu.value = false
}

const del = row => {
  console.log(row)
  ElMessageBox.confirm('确认删除选择的记录?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      delete_roles(row.id).then(result => {
        if (result.succeed) {
          ElMessage({
            type: 'success',
            message: '删除成功'
          })
          search()
        }
      })
    })
    .catch(() => {})
}

const submitForm = async fromdata => {
  try {
    if (isEdit.value) {
      // 修改角色
      const res = await edit_roles(fromdata)
      if (res.succeed) {
        ElMessage({
          type: 'success',
          message: res.msg
        })
      }
    } else {
      // 新增角色
      const res = await add_roles(fromdata)
      if (res.succeed) {
        ElMessage({
          type: 'success',
          message: res.msg
        })
      }
    }
    isEdit.value = false
    await close()
    await search()
  } catch (error) {
    console.log('error', error)
  }
  // this.$refs.dialogEdit.loadClose()
}
</script>
<style lang="scss" scoped>
.table-container {
  height: calc(100% - 90px);
}
.container {
  width: 100%;
  height: 100vh;
  padding: 10px;
}
</style>
